<template>
	<view class="pages" v-if="!loading">
		<view class="contain">
			<scroll-view class="detail" scroll-y>
				<view class="wrap">
					<u-swiper :list="list" height="750"></u-swiper>
				</view>
				<view class="">
					<view class="wrapper">
						<view class="basic">
							<view class="name">{{ goods.name }}</view>
							<view class="tips">{{ goods.description }}</view>
						</view>
						<!-- 杯型 -->
						<view class="properties" v-if="goods.cups&&goods.cups.length>0">
							<view class="property">
								<view class="title">
									<text class="name">杯型</text>
									<view class="desc" v-if="item.desc">({{ item.desc }})</view>
								</view>
								<view class="values">
									<view @tap="changeCups(item)" class="value" v-for="(item, index) in goods.cups"
										:key="item.id" :class="{'default': item.is_default}">
										{{ item.size_name }} &nbsp;
										<text style="margin-left: 20rpx;" v-if="item.price">￥{{(item.price/100).toFixed(2)}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="properties" v-if="attribute">
							<view class="property" v-for="(item, index) in attribute" :key="index">
								<view class="title">
									<text class="name">{{ item.ch_name }}</text>
									<view class="desc" v-if="item.desc">({{ item.desc }})</view>
								</view>
								<view class="values">
									<view class="value" v-for="(value, key) in item.options" :key="key"
										:class="{'default': value.is_default}"
										@tap="changePropertyDefault(value,index,key)">
										{{ value.name }}
									</view>
								</view>
							</view>
						</view>
						<view class="properties" v-if="toppings">
							<view class="property" v-for="(item, index) in toppings" :key="index">
								<view class="title">
									<text class="name">{{ item.ch_name }}</text>
									<view class="desc" v-if="item.desc">({{ item.desc }})</view>
								</view>
								<!-- 如果有Price属性 则是加区 -->
								<view class="values">
									<view class="value1" v-for="(value, key) in item.options" :key="key"
										:class="{'default': value.num}" v-if="value.status">
										<view class="" :class="{'default1': value.num}">
											{{ value.name }}
											<text style="margin-left: 20rpx;" v-if="value.price">￥{{(value.price/100).toFixed(2)}}</text>
										</view>
										<view class="btn-group">
											<button v-show="value.num" type="default" plain class="btn" size="mini"
												hover-class="none" @tap="Reducetoppings(value)">
												<view class="iconfont iconsami-select"></view>
											</button>
											<view class="btn" v-show="!value.num">

											</view>
											<view class="number" v-show="!value.num">

											</view>
											<view class="number" v-show="value.num">{{ value.num }}</view>
											<button type="primary"  class="btn" size="min" hover-class="none"
												@tap="Addtoppings(value)">
												<view class="iconfont iconadd-select"></view>
											</button>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</scroll-view>
		</view>
		<view class="bottom">
			<view class="action">
				<view class="left">
					<view class="price">￥{{ (totalPrice/100).toFixed(2) }}</view>
					<view class="props">
						{{defAtt}}
					</view>
				</view>
				<view class="btn-group">
					<button type="default" plain class="btn" size="mini" hover-class="none" @tap="handlePropertyReduce">
						<view class="iconfont iconsami-select"></view>
					</button>
					<view class="number">{{ goods.num }}</view>
					<button type="primary" class="btn" size="min" hover-class="none" @tap="handlePropertyAdd">
						<view class="iconfont iconadd-select"></view>
					</button>
				</view>
			</view>
			<view class="add-to-cart-btn" @tap="handleAddToCartInModal">
				<view>加入购物车</view>
			</view>
		</view>

	</view>
	<view class="loading" v-else>
		<image src="https://res.uxiao.vip/utea-admin/loading.gif"></image>
		<!-- <image src="../../static/images/13.jpg" mode=""></image> -->
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				loading: true,
				list: [{
					image: "https://res.uxiao.vip/Utea/13.jpg",
				}],
				goods: {},
				totalPrice: 0,
				toppings: [],
				attribute: [],
				selected: {
					id:'',
					num: 0,
					name: '',
					category_id: '',
					cups: {},
					toppings: [],
					attribute: [],
					totalPrice:0,
					desc:''
				}

			};
		},
		onLoad(e) {
			this.loading = true
			this.getDetail(e.id)
			
			
		},
		watch: {
			//计算商品数量及价格
			goods: {
				deep: true,
				handler() {
					this.selected.num = this.goods.num
					this.totalPrice = 0
					this.goods.cups.filter(item => {
							if (item.is_default) {
								this.selected.cups = item
								this.totalPrice =  Number(item.price)
							}
						}),
						console.log(this.goods,333333);
						if(this.goods.extraproperties){
							this.goods.extraproperties.forEach(item => { //
								item.options.filter(it => {
									if (it.num > 0) {
										this.totalPrice += it.num * Number(it.price)
									}
								})
							})
						}
						this.selected.totalPrice =  this.totalPrice
						this.totalPrice = this.goods.num * this.totalPrice
				}
			}
		},
		computed: {
			
			//计算商品杯型、属性及小料参数
			defAtt(){
				let str = []
				if(this.goods.cups){
					this.goods.cups.filter(item => {
						if (item.is_default) {
							str.push(item.size_name)
						}
					})
				}
				this.selected.attribute = []
				this.attribute.forEach((item,index)=>{
					item.options.forEach(it=>{
						if(it.is_default){
							str.push(it.name)
							it.attribute_name = this.attribute[index].name
							this.selected.attribute.push(it)
						}
					})
				})
				this.selected.toppings = []
				this.toppings.forEach((item,index)=>{
					item.options.forEach(it=>{
						if(it.num>0){
							str.push(it.name+'*'+it.num)
							it.toppings_name = this.toppings[index].name
							this.selected.toppings.push(it)
						}
					})
				})
				this.selected.desc = str.join('/')
				console.log(this.selected);
				return str.join('/')
				
			}
		},
		methods: {
			...mapMutations(['SET_GOODS']),
			// 加入购物车
			handleAddToCartInModal(){
				this.SET_GOODS(JSON.parse(JSON.stringify(this.selected)))
				uni.navigateBack()
			},
			// 添加饮品数量
			handlePropertyAdd() {
				this.goods.num++
			},
			// 减少饮品数量
			handlePropertyReduce() {
				if (this.goods.num > 1) {
					this.goods.num--
				} else {
					this.goods.num = 1
				}
			},
			//改变默认属性
			changePropertyDefault(value, index, key) {
				this.attribute[index].options.forEach((item, ind) => {
					item.is_default = 0
					if (key == ind) {
						item.is_default = 1
					}
				})
			},
			// 更换杯型
			changeCups(e) {
				this.goods.cups.forEach(item => {
					item.is_default = 0
					if (item.id == e.id) {
						item.is_default = 1
					}
				})
			},
			// 减小料
			Reducetoppings(e) {
				e.num--
			},
			//加小料
			Addtoppings(e) {
				e.num++
			},
			async getDetail(e) {
				let res = await this.apiPost('/product/detail', {
					id: e
				})
				if (res.data.code == 1) {
					this.goods = res.data.data
					this.list[0].image = this.goods.product_image_url
					this.selected.category_id = this.goods.category_id
					this.selected.id = this.goods.id
					this.selected.name = this.goods.name
					this.$set(this.goods, 'num', 1);
					console.log(this.goods.extraproperties,89898);
					if (this.goods.extraproperties) {
						this.goods.extraproperties.forEach(item => {
							console.log(item, 123)
							if (item.options.length > 0) {
								console.log(item.options,4567)
								if (item.options[0].is_default == 0) {
									this.toppings.push(item)
								} else {
									this.attribute.push(item)
								}
							}
						})
					}
					this.toppings.forEach(item => {
						item.options.forEach(it => {
							this.$set(it, 'num', 0);
						})
					})
					this.attribute.forEach(item => {
						item.options.forEach((it, index) => {
							if (index == 0) {
								this.$set(it, 'is_default', 1);
							} else {
								this.$set(it, 'is_default', 0);
							}
						})
					})
					console.log(this.goods,1);
					console.log(this.toppings,2);
					console.log(this.attribute,3);
					this.loading = false
				} else {
					this.msg(res.data.msg)
				}
			}
		}
	}
</script>

<style lang="scss">
	.pages {
		position: relative;
		height: 100vh;
		background-color: #fff !important;
	}

	.detail {
		width: 100%;
		min-height: 1vh;
		max-height: calc(100vh - 200rpx);
		;

		.wrap {}


		.wrapper {
			width: 100%;
			height: 100%;
			overflow: hidden;

			.basic {
				padding: 20rpx 20rpx 30rpx;
				display: flex;
				flex-direction: column;

				.name {
					font-size: $font-size-base;
					color: $text-color-base;
					margin-bottom: 10rpx;
				}

				.tips {
					font-size: $font-size-sm;
					color: $text-color-grey;
				}
			}

			.properties {
				width: 100%;
				// border-top: 2rpx solid $bg-color-grey;
				padding: 10rpx 30rpx 0;
				display: flex;
				flex-direction: column;

				.property {
					width: 100%;
					display: flex;
					flex-direction: column;
					margin-bottom: 30rpx;
					padding-bottom: -16rpx;

					.title {
						width: 100%;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						margin-bottom: 20rpx;

						.name {
							font-size: 26rpx;
							color: $text-color-base;
							margin-right: 20rpx;
						}

						.desc {
							flex: 1;
							font-size: $font-size-sm;
							color: $color-primary;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.values {
						width: 100%;
						display: flex;
						flex-wrap: wrap;

						.value {
							border-radius: 8rpx;
							background-color: $bg-color-grey;
							padding: 16rpx 30rpx;
							font-size: 26rpx;
							color: $text-color-assist;
							margin-right: 16rpx;
							margin-bottom: 16rpx;

							&.default {
								background-color: $color-primary;
								color: $text-color-white;
							}
						}

						.value1 {
							width: 100%;
							border-radius: 8rpx;
							background-color: $bg-color-grey;
							padding: 16rpx 30rpx;
							font-size: 26rpx;
							color: $text-color-assist;
							margin-right: 16rpx;
							margin-bottom: 16rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							border: 1rpx solid transparent;

							.btn-group {
								display: flex;
								align-items: center;
								justify-content: space-around;
								width: 200rpx;

								.number {
									font-size: $font-size-base;
									width: 44rpx;
									height: 44rpx;
									line-height: 44rpx;
									text-align: center;
								}

								.btn {
									padding: 0;
									font-size: $font-size-base;
									width: 44rpx;
									height: 44rpx;
									line-height: 44rpx;
									border-radius: 100%;
								}
							}

							&.default {
								border: 1rpx solid $color-primary;
								background-color: $color-primary1;

								.default1 {
									color: $color-primary;
								}
							}

						}
					}
				}
			}
		}
	}

	.bottom {
		position: absolute;
		bottom: 0;
		width: 100%;

		.action {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: $bg-color-grey;
			height: 120rpx;
			padding: 0 26rpx;

			.left {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-right: 20rpx;
				overflow: hidden;

				.price {
					font-size: $font-size-lg;
					color: $text-color-base;
				}

				.props {
					color: $text-color-assist;
					font-size: 24rpx;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.btn-group {
				display: flex;
				align-items: center;
				justify-content: space-around;

				.number {
					font-size: $font-size-base;
					width: 44rpx;
					height: 44rpx;
					line-height: 44rpx;
					text-align: center;
				}

				.btn {
					padding: 0;
					font-size: $font-size-base;
					width: 44rpx;
					height: 44rpx;
					line-height: 44rpx;
					border-radius: 100%;
				}
			}
		}

		.add-to-cart-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: $color-primary;
			color: $text-color-white;
			font-size: $font-size-base;
			height: 100rpx;
			// border-radius: 0 0 12rpx 12rpx;
		}
	}

	.loading {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f9fbfd !important;
		image {
			width: 260rpx;
			height: 260rpx;
			position: relative;
			margin-top: -200rpx;
			/* #ifdef h5 */
			margin-top: 0;
			/* #endif */
		}
	}
</style>